<template>
    <div class="addpoint-header">
        <input type="text" placeholder="请输入点的name，按回车键确认" @keyup.enter="addpoint" v-model="title">
    </div>
</template>
<script>
    import bus from '@/utils/bus';
    import { ref } from 'vue';
    import { nanoid } from 'nanoid';

    export default{
        name:'AddPointHeader',
        setup() {
            const title = ref('');

            function addpoint(){
                if(!title.value) return alert('输入不能为空');
                const point = {id: nanoid(), title: title.value, choose: false, color: 'aqua', x: 40, y: 40, isactive: false, indegree: 0, linkpoint: []};
                if(!/^[a-zA-Z0-9\s]+$/.test(point.title)) {
                    title.value = '';
                    return alert("点的name只能包含字母、数字和空格");
                }
                title.value = '';
                bus.emit('addpoint_list', point);
            }

            return {
                title,
                addpoint
            }
        }

    }
</script>
<style scoped>
.addpoint-header{
    box-sizing: border-box;
    height: 12%;
}
.addpoint-header input{
    width: 95%;
    height: 80%;
    margin: 0 auto;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: .25rem;
    padding: .25rem .4375rem;
}
.addpoint-header input :focus{
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 .0625rem .0625rem rgba(0, 0, 0, 0.075),0 0 .5rem rgba(82, 168, 236, 0.8);
}
</style>